<script setup lang="ts">
import {defineProps} from "vue";
import {ContainerMaterialType} from "@/types/material.type";
import {SmoothDndContainer01} from "@/components/SmoothDnd/01/SmoothDndContainer01";
import {SmoothDndDraggable01} from "@/components/SmoothDnd/01/SmoothDndDraggable01";
import MaterialRender03d from "@/material/MaterialRender03d.vue"
import {useSmoothDnd03dStore} from "@/stores/smoothDnd03dStore";
import {useEditorDebugStore} from "@/stores/debug";
import {storeToRefs} from "pinia";


const smoothDndStore = useSmoothDnd03dStore();
const debugStore = useEditorDebugStore();
const {items, selectedItemId} = storeToRefs(smoothDndStore)

const props = defineProps<{material:ContainerMaterialType}>();
  const text = {
    type: 'container',
    props: {
      content: '容器物料'
    },
    children: []
  }


</script>

<template>
  <div class="zhtt-container-material" style="position: relative;margin:0;padding:2px;background: #ccddff;">
    <div style="position: absolute;top:0;">{{props.material?.props?.content || text.props.content}}</div>
    <SmoothDndContainer01
        v-if="props.material?.isInstance"
        group-name="blocks"
        orientation="vertical"
        tag="div"
        @mouseenter="()=>{
            console.log('子容器mouseover', props.material?.id)
            smoothDndStore.setParentContainerId(props.material?.id);
          }"
        @mouseleave="()=>{
            console.log('子容器离开', props.material?.id)
            smoothDndStore.setParentContainerId(null);
          }"
        removeOnDropOut="true"
        @drop="(item, index) => {
            console.log('子容器:', props.material?.id);
            const newItems = smoothDndStore.applyDrag(items, item, props.material?.id);
            return smoothDndStore.replaceAll(newItems);
          }"
    >
      <SmoothDndDraggable01
          v-for="item in props.material?.children"
          :key="item"
          class="item"
          @click.stop="smoothDndStore.setSelectedItemId(item.id)">
        <MaterialRender03d
            :materialType="item"
            :class="{active:debugStore.debug || item.id===selectedItemId}"
        ></MaterialRender03d>
      </SmoothDndDraggable01>
    </SmoothDndContainer01>
  </div>
</template>

<style scoped>

.item-wrap {
  display: flex;
  padding: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  min-width: 100px;
  min-height: 30px;
  color: #fff;
  background: #3eaf7c;
  margin: 8px;
  text-align: center;
}

.active {
  border: 1px solid #003a8c;
  height: 100%;
}
</style>
